<template>
    <div class="woshi">
        <Tit :tit="tit" />
        <div class="img">
            <img src="../../assets/image/banner6.png" alt="" />
        </div>
        <van-row>
            <van-col span="4" v-html="value1"></van-col>
            <van-col span="19"></van-col>
            <van-col span="1" style="color:red">＞</van-col>
        </van-row>
        <div class="box clearfix">
            <div class="card" v-for="item in list1" :key="item.id">
                <div class="top">
                    <img src="../../assets/shopcartimg/2.jpg" alt="">
                </div>
                <div class="mid" v-html="item.name"></div>
                <div class="bottom" v-html="item.price"></div>
            </div>
        </div>


        <van-row>
            <van-col span="4"  v-html="value2"></van-col>
            <van-col span="19"></van-col>
            <van-col span="1" style="color:red">＞</van-col>
        </van-row>
        <div class="box clearfix">
            <div class="card" v-for="item in list2" :key="item.id">
                <div class="top">
                    <img src="../../assets/shopcartimg/2.jpg" alt="">
                </div>
                <div class="mid" v-html="item.name"></div>
                <div class="bottom" v-html="item.price"></div>
            </div>
        </div>
    </div>
</template>

<script>
require('../../assets/shopcartimg/2.jpg')
import Tit from "../../components/tit.vue";
import { 
    getgoods,
    getgoodstype
 } from '../../api/index'

export default {
    data() {
        return {
            tit: "卧室",
            value1:'双人床',
            value2:'单人床',
            list1:[],
            list2:[]
        };
    },
    components: {
        Tit,
    },
    created(){
       this.getgoodsinit()
    },
    methods:{
        async getgoodsinit(){
            // let obj = await getgoods()
            let obj1 = await getgoodstype({type:this.value1})
            let obj2 = await getgoodstype({type:this.value2})
            console.log(obj1.data.data);
            this.list1 = obj1.data.data
            this.list2 = obj2.data.data
        }
    },
};
</script>

<style scoped lang='less'>
.img {
    font-size: 0;
    margin-bottom: 20px;
    img {
        width: 100%;
        height: 400px;
    }
}
.van-row{
    margin: 0 0 20px 0;
    font-size: 20px;
    padding-left: 16px;
    box-sizing: border-box;
    .van-col{
        // padding-left: 16px;
        // padding-right: 16px;
    }
}
.box{
    .card{
    box-shadow: 5px 5px 5px 1px #eeeeee, -5px -5px 5px 1px #eeeeee;
    width: 230px;
    height: 260px;
    margin-left: 15px;
    float: left;
    margin-bottom: 20px;
        .top{
            padding: 40px 20px 0 20px;
            box-sizing: border-box;
            width: 100%;
            text-align: center;
            font-size: 0;
            img{
                width: 180px;
                height: 120px;
            }
        }
        .mid,.bottom{
            font-size: 20px;
            width: 100%;
            text-align: center;
            margin-top: 20px;
        }
        .bottom{
            margin-top: 10px;
            color: red;
            // font-size: 30px;
        }
    }
}

.clearfix::after{
    content:"";
    display: block;
    clear: both;
}
</style>